---
order: 3
title: Sky
type: Graphics
group: Background
label: Graphics/Background
---

The sky is a type of background drawn before the camera renders. This type of background is useful for 3D games and applications because it provides a sense of depth, making the environment appear much larger than its actual size. The sky itself can contain any objects (such as clouds, mountains, buildings, and other unreachable objects) to create the feeling of a distant three-dimensional environment. Galacean can also use the sky to produce realistic ambient lighting in the scene. For more details, refer to [Baking](/en/docs/graphics/light/bake/).

In sky mode, developers can set `material` and `mesh` themselves. With Galacean's built-in `skybox` and `procedural sky`, you can set the desired sky effect with one click.

## Setting the Skybox

In the editor, simply follow these steps to set the skybox for the background:

### 1. Create Skybox Texture

> You can download free HDR maps from [Poly Haven](https://polyhaven.com/) or [BimAnt HDRI](http://hdri.bimant.com/)

A skybox texture is a [cube texture](/en/docs/graphics/texture/cube/). After preparing the HDR, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select TextureCube(.hdr)** -> **Choose the corresponding HDR map** -> **Cube texture asset creation complete**.

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Oi3FSLEEaYgAAAAAAAAAAAAADhuCAQ/original" />

### 2. Create Skybox Material

After creating the cube texture asset, follow the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Create** -> **Select Material** -> **Select the generated asset** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Click the Shader property in the Base section** -> **Select Sky Box** -> **Click HDR in the Base section** -> **Choose the cube texture created in the first step** to create the skybox material.

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*9j2eSYkwg8MAAAAAAAAAAAAADhuCAQ/original" />

### 3. Set the Skybox

Finally, follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background section** -> **Set Mode to Sky** -> **Select the material created in the second step** -> **Set Mesh to the built-in Cuboid** to see the background of the scene change to the skybox.

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*rqvsSpkGJ6UAAAAAAAAAAAAADhuCAQ/original" />

### Code to Set Skybox

```typescript
// 创建天空盒纹理
const textureCube = await engine.resourceManager.load<TextureCube>({
  urls: [
    "px - right 图片 url",
    "nx - left 图片 url",
    "py - top 图片 url",
    "ny - bottom 图片 url",
    "pz - front 图片 url",
    "nz - back 图片 url",
  ],
  type: AssetType.TextureCube,
});
// 创建天空盒材质
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.texture = textureCube;
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
```

## Setting Procedural Sky

Procedural sky is the default background in 3D projects in the editor. You can also follow the path **[Hierarchy Panel](/en/docs/interface/hierarchy)** -> **Select Scene** -> **[Inspector Panel](/en/docs/interface/inspector)** -> **Background section** -> **Set Mode to Sky** -> **Select the built-in SkyMat material** -> **Set Mesh to the built-in Sphere**

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Qe3IRJ9ciNoAAAAAAAAAAAAADhuCAQ/original" />

### Code to Set Procedural Sky

```typescript
// 创建大气散射材质
const skyMaterial = new SkyProceduralMaterial(engine);
// 设置天空盒
const background = scene.background;
background.mode = BackgroundMode.Sky;
background.sky.material = skyMaterial;
background.sky.mesh = PrimitiveMesh.createSphere(engine);
```

### Properties

In the atmospheric scattering material's **[Inspector Panel](/en/docs/interface/inspector)**, you can see many adjustable properties:

<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*igE-RLCRc24AAAAAAAAAAAAADhuCAQ/original" alt="image-4" style={{ zoom: "40%" }} />

> The built-in atmospheric scattering material cannot have its properties freely adjusted; developers can create and adjust their own.

| Property Name                                                               | Description                                                                                                                                             |
| :-------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [exposure](/apis/core/#SkyProceduralMaterial-exposure)                   | The exposure of the sky, the higher the value, the brighter the sky.                                                                                     |
| [sunMode](/apis/core/#SkyProceduralMaterial-sunMode)                     | The method used to generate the sun in the sky, including `None`, `Simple`, and `HighQuality`. None does not generate a sun, Simple generates a simple sun, and HighQuality generates a sun with a definable appearance. |
| [sunSize](/apis/core/#SkyProceduralMaterial-sunSize)                     | The size of the sun, the larger the value, the larger the sun.                                                                                           |
| [sunSizeConvergence](/apis/core/#SkyProceduralMaterial-sunSizeConvergence) | The convergence of the sun's size, effective only when the sun generation mode is `HighQuality`.                                                         |
| [atmosphereThickness](/apis/core/#SkyProceduralMaterial-atmosphereThickness) | The density of the atmosphere, higher density absorbs more light.                                                                                        |
| [skyTint](/apis/core/#SkyProceduralMaterial-skyTint)                     | The color of the sky.                                                                                                                                    |
| [groundTint](/apis/core/#SkyProceduralMaterial-groundTint)               | The color of the ground.                                                                                                                                 |
